<template>
  <div class="userInfo-container">
 <!-- 标题 -->
    <!-- <van-nav-bar
      title="个 人 信 息"
      class="navBar"
    /> -->

    <!-- 已登录 -->
    <div
      class="notLog login"
      v-if="userProfile.user_id"
      @click="$router.push('/profile/info')"
    >
      <div class="left">
        <van-image
          round
          fit="cover"
          :src="'https://elm.cangdu.org/img/' + userProfile.avatar"
          class="avatar"
        />
        <div class="info">
          <span>{{ userProfile.username }}</span>
          <span>
            <van-icon name="phone-o" />
            {{ userProfile.mobile || '暂无绑定手机号' }}
          </span>
        </div>
      </div>

      <div class="right">
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 未登录 -->
    <div class="logged login" v-else @click="$router.push('/login')">
      <div class="left">
        <van-image
          round
          fit="cover"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          class="avatar"
        />
        <div class="info">
          <span>登录 / 注册</span>
          <span>
            <van-icon name="phone-o" />
            暂无绑定手机号</span
          >
        </div>
      </div>
      <div class="right">
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 我的 -->
    <van-grid :column-num="3" center class="my">
      <van-grid-item text="我的余额" @click="$router.push('/myBalance')">
        <div slot="icon">
          <span class="num balance">{{ userProfile.balance || 0 }}</span>
          <span>元</span>
        </div>
      </van-grid-item>
      <van-grid-item text="我的优惠" @click="$router.push('/discounts')">
        <div slot="icon">
          <span class="count num">{{ userProfile.gift_amount || 0 }}</span>
          <span>个</span>
        </div>
      </van-grid-item>
      <van-grid-item text="我的积分" @click="$router.push('/integral')">
        <div slot="icon">
          <span class="integral num">{{ userProfile.point || 0 }}</span>
          <span>分</span>
        </div>
      </van-grid-item>
    </van-grid>
    <!-- 服务 -->
    <van-cell-group class="vanCell">
      <van-cell
        @click="$router.push('/order')"
        title="我的订单"
        is-link
        icon="orders-o"
      />
      <van-cell @click="goto" title="积分商城" is-link icon="shop" />
      <van-cell
        @click="$router.push('/vipcard')"
        title="饿了么会员卡"
        is-link
        icon="vip-card"
      />
    </van-cell-group>

    <van-cell-group class="vanCell">
      <van-cell
        @click="$router.push('/service')"
        title="服务中心"
        is-link
        icon="service"
      />
      <van-cell
        @click="$router.push('/download')"
        title="下载饿了么APP"
        is-link
        icon="add"
      />
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/profile'
import { getAvatar } from '@/utils/storage'

export default {
  name: 'profile',
  data() {
    return {
      userProfile: {},
    }
  },
  methods: {
    // 跳转至积分商城
    goto() {
      window.open(
        'https://activity.m.duiba.com.cn/autoLogin/notlogin#/chome/index',
        '_self'
      )
    },
    // 页面显示获取用户信息
    async getUserInfo() {
      const { data } = await getUserInfo(this.userInfo.user_id)
      this.userProfile = data
      this.userProfile.avatar = getAvatar('avatar') || this.userProfile.avatar
      this.userProfile.username =
        getAvatar('userName') || this.userProfile.username
    },
  },
  computed: {
    ...mapState(['userInfo']),
  },
  created() {
    this.getUserInfo()
  },
}
</script>


<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.userInfo-container {
  height: 90vh;
  .navBar {
    margin-bottom: 0;
    border-bottom: 1px solid #ccc;
  }
  .login {
    width: 375px;
    height: 90px;
    padding: 0 15px;
    background-color: #3190e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      color: #fff;
      .avatar {
        width: 60px;
        height: 60px;
        margin-right: 15px;
      }
      .info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        span:first-child {
          margin-bottom: 2px;
          font-size: 18px;
          font-weight: 700;
        }
      }
    }
    .right {
      font-size: 28px;
      color: #fff;
    }
  }
  .my {
    font-size: 12px;
    /deep/ .van-grid-item__text {
      font-size: 14px;
      margin-top: 5px;
    }
    .num {
      font-size: 28px;
      font-weight: 700;
    }
    .balance {
      color: #ff9952;
    }
    .count {
      color: #ff5f95;
    }
    .integral {
      color: #9ac20b;
    }
  }
  .vanCell {
    margin-top: 10px;
    .van-cell__left-icon {
      margin-right: 10px;
      font-size: 20px;
    }
    .van-icon-shop {
      color: #fc7b53;
    }
    .van-icon-vip-card {
      color: #ffc636;
    }
    .van-icon-service {
      color: #4aa5f0;
    }
    .van-icon-add {
      color: #3cabff;
    }
    .van-cell__title {
      font-size: 16px;
      vertical-align: middle;
    }
  }
}
</style>

